const { watch, ref, onMounted } = Vue;
const appOption = {
  data() {
    return {};
  },

  setup() {
    let show = ref(true);
    const pid = ref(null);
    const lis = ref([]);
    let lisActive = ref(1);

    watch(show, (newVal) => {
      let pids = pid.value;
      newVal ? openp(pids) : closep(pids);
    });

    function movelist() {
      lisActive.value++;
      if (lisActive.value > 10) {
        lisActive.value = 1;
      }

      setTimeout(requestAnimationFrame, 1000, movelist)
    }

    onMounted(() => {
      movelist()
    });

    return {
      show,
      pid,
      lis,
      lisActive,
    };
  },
};

// 显示
function openp(pid) {
  pid.classList.add("fade-enter-active", "fade-enter");

  setTimeout(() => {
    pid.classList.remove("fade-enter");
    pid.classList.add("fade-enter-to");
  }, 0);

  setTimeout(() => {
    pid.classList.remove("fade-enter-active", "fade-enter-to");
  }, getTimeout(pid));
}

// 关闭
function closep(pid) {
  console.log(pid);
  pid.classList.add("fade-leave-active", "fade-leave");

  setTimeout(() => {
    pid.classList.remove("fade-leave");
    pid.classList.add("fade-leave-to");
  }, 0);

  setTimeout(() => {
    pid.classList.remove("fade-leave-active", "fade-leave-to");
  }, getTimeout(pid));
}


function getTimeout(elm) {
  let duration = getComputedStyle(elm, null)["transitionDuration"];

  // 单位是否毫秒
  const isMs = duration.search(/ms$/);
  let timeout = parseInt(duration);
  if (isMs === -1) {
    // 转换为毫秒
    timeout *= 1000;
  }

  console.log(timeout);

  return timeout;
}
